<template>
  <div>

	<myheader></myheader>


	<br><br>

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
		
        <div>
            活动标题：<input type="text" v-model="title">
            <br><br>
            活动网址：<input type="text" v-model="link">
            <br><br>
            上传活动图片：<input type="file" id="img">
            <br><br>
            <Button @click="submit">提交</Button>
        </div>
		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
        //面包屑导航
        datas:[{title:'首页',route:{name:'index'}},{title:'活动添加页面'}],
        msg: "这是一个变量",
        title:'',
        link:''
        
    }
  },
    //定义组件
    components:{
    'myheader':myheader,
    'myfooter':myfooter
    },
    mounted:function(){
      
   
  
},
    methods:{
        submit(){
            let form_data = new FormData();
            //声明文件对象
            var img = document.getElementById("img").files[0];
            //添加文件
            form_data.append('img',img)
            form_data.append("title", this.title);
            form_data.append("link", this.link);
            //请求后台接口
            this.axios({
                url:'http://localhost:8000/insertpics/',
                method: "POST",
                data: form_data,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
                }).then(res => {
                console.log(res);
                this.$Message(res.data.message);
            })
        }
    }
}

</script>
 
<style>



</style>